<template>
  <div class="ordersell">
    <div class="ordersell-choose">
      <span style="margin-left: 20px">时间范围</span>
      <el-date-picker
        style="margin: 0 20px"
        v-model="value1"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始时间"
        end-placeholder="结束时间"
        value-format="yyyy-MM-dd HH:mm:ss"
      >
        <!--  value-format="yyyy-MM-dd HH:mm:ss" 转时间格式 -->
      </el-date-picker>
      <el-button :disabled="lis" type="primary" @click="clickckeck"
        >查询</el-button
      >
    </div>
    <div class="ordersell-line">
      <div id="myChart"></div>
    </div>
  </div>
</template>

<script>
// 引入echarts报表
import * as echarts from "echarts";
// 引入订单报表接口
import { ordertotal } from "@/apis/echartsdata";
// 引入年月日转格式插件
import { YMDHMS } from "@/utils/utils";
export default {
  methods: {
    // 点击获取数据,存进数组,发送ajax,并重新调用echarts
    clickckeck() {
      this.lis = true;
      setTimeout(() => {
        this.lis = false;
      }, 1000);
      // 获得当前日期数据,并转换格式
      // console.log(this.value1);
      this.value1 = [YMDHMS(this.value1[0]), YMDHMS(this.value1[1])];
      // console.log(this.value1);
      // 发送ajax查询数据
      ordertotal({
        date: JSON.stringify(this.value1),
      }).then((res) => {
        // console.log(res.data.data);
        // this.datearr.push(YMDHMS(res.data.data.orderTime));
        // console.log(this.datearr);
        // 遍历获得每个日期
        for (const obj of res.data.data) {
          // console.log(obj.orderTime);
          // 将日期转换格式并存进数组
          this.datearr.push(YMDHMS(obj.orderTime));
          // 将订单金额存进数组
          this.sellarr.push(obj.orderAmount);
        }
        // 再调用echarts函数,这个函数加载后会再次清空这个数组
        this.funecharts();
      });
    },
    // 封装一个获取值并发送ajax的函数
    // 封装一个echarts函数
    funecharts() {
      //创建一个对象,并初始化
      let chartDom = echarts.init(document.getElementById("myChart"));
      // 给这个对象放入数据和结构
      chartDom.setOption({
        title: {
          text: "订单统计",
        },
        tooltip: {
          trigger: "axis",
        },
        legend: {
          data: ["销售额"],
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          // 日期数组
          data: this.datearr,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "销售额",
            type: "line",

            // 销售额数组
            data: this.sellarr,
          },
        ],
      });
      // 渲染数据之后,再将数组清空,不然会叠加(写在最后)
      this.datearr = [];
      this.sellarr = [];
    },
  },
  data() {
    return {
      lis: false,
      value1: [
        // 传参,第一个为往前算三年,以毫秒时间戳来算,第二个为网络当前时间
        new Date(new Date() - 1000 * 60 * 60 * 24 * 365 * 5),
        new Date(),
      ],
      // 日期数组
      datearr: [],
      // 销售额数组
      sellarr: [],
    };
  },
  // mounted() {
  // // 数据获取之后,页面渲染之后,再调用这个echarts封装的函数()
  // // 获得当前日期数据
  // // console.log(this.value1);
  // this.value1 = [YMDHMS(this.value1[0]), YMDHMS(this.value1[1])];
  // // console.log(this.value1);
  // // 发送ajax查询数据
  // ordertotal({
  //   date: JSON.stringify(this.value1),
  // }).then((res) => {
  //   // console.log(res.data.data);
  //   // this.datearr.push(YMDHMS(res.data.data.orderTime));
  //   // console.log(this.datearr);
  //   // 遍历获得每个日期
  //   for (const obj of res.data.data) {
  //     // console.log(obj.orderTime);
  //     this.datearr.push(YMDHMS(obj.orderTime));
  //     this.sellarr.push(obj.orderAmount);
  //   }
  //   this.funecharts();
  // });
  // },
};
</script>

<style lang="less" scoped>
.ordersell {
  margin: 20px;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  .ordersell-choose {
    margin: 20px;
  }
  .ordersell-line {
    margin: 20px;
    background-color: #fff;
    box-sizing: border-box;
    padding: 0 20px 20px 20px;
    border-radius: 4px;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    #myChart {
      padding: 20px;
      height: 500px;
    }
  }
}
</style>